Drag and Drop

hr.icon

選択した写真やテキストなどのコンテンツを、指一本で別の場所にドラッグし、指を上げてドロップすることで、移動や複製を行うことができます。

https://gyazo.com/ff5cb0c1371b4d0c803671a017f00631

選択したコンテンツをタッチしたままにすると、コンテンツが上昇してユーザーの指にくっついているように見えます。

コンテンツをドラッグすると、移動先がアニメーションとビジュアルで表示されます。

また、ドロップできない場合や、移動ではなく複製になってしまう場合は、バッジが表示されます。

Sources and Destinations

ドラッグ＆ドロップでは、選択したコンテンツをソースの位置からデスティネーションに移動させます。

これらの場所は、テキストビューのように同じコンテナ内にある場合もあれば、分割ビューの反対側にあるテキストビューのように異なるコンテナ内にある場合もあります。

例えば、ノートでは、選択したテキストを同じノート内の新しい場所にドラッグできます。

また、リマインダーでは、個々のリマインダーをあるリストからドラッグして別のリストにドロップすることができます。

https://gyazo.com/9ae8b4d3042adfa3821b94257e632a88

iPadでは、転送元と転送先を別のアプリケーションに設定することができるため、Safariのウェブページからメールの新規メッセージに写真をドラッグするといった、アプリケーション間の相互作用が可能になります。

コンテンツをドラッグしている間、ユーザーは、マルチタスク、ホーム画面への退出、または画面下部から上にスワイプしてDockを表示することで、別のアプリケーションにアクセスすることができます。

注意事項

アプリ間でコンテンツをドラッグ＆ドロップすると、コンテンツの移動ではなく、重複してしまいます。

Supporting Drag and Drop

ドラッグ＆ドロップは効率的で直感的な機能であり、ユーザーはシステム全体に実装されることを期待しています。

テキスト、写真、ビデオ、オーディオなど、移動、コピー、挿入が必要なコンテンツをアプリで作成する場合は、ドラッグ＆ドロップをサポートする必要があります。

すべての選択可能なコンテンツと編集可能なコンテンツでドラッグ＆ドロップを利用できるようにします。

選択可能なコンテンツはドラッグ可能で、編集可能なコンテンツはドロップされたコンテンツを受け入れる必要があります。

また、アプリがこれらの領域でのコピー＆ペーストをサポートしていることも確認してください。

必要に応じてコントロールにコンテンツをドロップできるようにします。

一般に、テキストフィールドなどのデータ入力や選択が可能なコントロールは、コンテンツをドロップできるように設定します。

可能な限り、標準のテキストビューとテキストフィールドを使用してください。

これらのシステム要素には、ドラッグ＆ドロップのサポートが組み込まれています。

https://gyazo.com/3b6e72240f81cf4a4b2e34d904043458

効率性を高めるために、複数アイテムのドラッグ＆ドロップのサポートを検討してください。

多くのアプリケーションでは、ユーザーが1本の指で1つのアイテムをドラッグし、ドラッグ中に別の指でアイテムをタップして追加アイテムを選択することができます。

選択されたアイテムは一緒に移動し、元のアイテムをドラッグしている指の下に重ねて表示されます。

ユーザーは、これらのアイテムをまとめてドラッグし、目的の場所にドロップします。

例えば、ホーム画面では、複数のアプリアイコンを選択して一度にフォルダにドラッグすることができます。

「写真」などの一部のアプリでは、ドラッグする前に複数のアイテムを選択できる選択モードが用意されています。

https://gyazo.com/d891bca2b60d547fdf8fe15a40664438

アプリ内のコンテンツをドラッグ＆ドロップする際に、移動とコピーのどちらになるかを判断します。

一般的には、移動元と移動先のコンテナが同じ場合（ドキュメント内のテキストのドラッグ）は移動となり、異なる場合（ドキュメント間やアプリケーション間のドラッグ）はコピーとなります。

しかし、これは必ずしもそうとは限りません。

何よりも、ドラッグ＆ドロップは直感的に操作できなければなりません。

リマインダーでは、リスト間でリマインダーをドラッグすると、コピーではなく移動されます。

アプリ間でコンテンツをドラッグ＆ドロップすると、必ずコピーされます。

可能な限り、ドラッグ＆ドロップを取り消すことができます。

一般的に、ユーザーが誤ってコンテンツを誤った場所にドロップした場合、元に戻すを使用してアプリを以前の状態に戻すことができるべきです。

つまり、ドロップしたコンテンツを削除し、アプリ内の他の場所から移動した場合は、元の場所に戻す必要があります。

スプリングローディングの有効化を検討します。

スプリングローディングを有効にすると、ユーザーは、選択したコンテンツをドラッグして、コンテンツをドロップせずに一時停止することで、ボタンやセグメントコントロールなどの特定のコントロールをアクティブにすることができます。

例えば、Mailでは、選択したメッセージをナビゲーションバーの「戻る」ボタンの上にドラッグすると、メールボックス階層の別の場所に移動することができます。

スプリングローディングは、コントロールをアクティブにする唯一の方法ではありません。

スプリングローディングは、コントロールを作動させる唯一の方法ではなく、発見される可能性のある装飾として使用してください。

ほとんどの場合、スプリングローディングされたコントロールは、タップジェスチャーにも反応するはずです。

Providing Dragged Content

必要に応じて、ドラッグアイテムのプレビューをカスタマイズします。

一般的に、ユーザーの指の下に表示されるプレビューは、ドラッグされるコンテンツの半透明な表現であるべきです。

この表示は、コンテキストを提供し、ドラッグが進行中であることを示し、ドラッグされたコンテンツの下にある目的地を見ることができます。

ドラッグされたデータは、可能な限り、忠実度の高いものから低いものまで、複数の表現を提供します。

例えば、線画を提供する場合は、PDFのベクター表現、透過性のあるロスレスPNG画像、透過性のないロスレスJPEG画像の順に提供することができます。

このようにして、送信先はインポート可能な最高品質の表現を選択することができます。

必要に応じて、カスタムオブジェクトのネイティブバージョンを最もリッチなデータとして表示します。

例えば、グラフをドラッグするアプリでは、まずネイティブのグラフオブジェクトを表示します。

次に、チャートオブジェクトをサポートしていないアプリのために、チャートの画像バージョンなどの代替品を提供します。

アプリのコンテンツの転送に時間やリソースがかかる場合は、ファイルプロバイダエクステンションを導入します。

ファイルプロバイダエクステンションは、アプリが実行されていなくても、転送プロセスを管理し、確実に完了させます。

なお、転送プロセスは、ユーザーがコンテンツをドロップするまで開始されません。

アプリのコンテンツの転送に時間がかかる場合は、進捗情報を提供します。

コンテンツのダウンロードが必要な場合や、大きなファイルのコピーに時間がかかる場合は、進捗情報を提供します。

最低限、コンテンツの合計サイズを提供することで、転送先が残り時間を計算し、適切な進行状況を表示することができます。

Accepting Dropped Content

視覚的な手がかりを使って潜在的なデスティネーションを特定し、コンテンツをドロップしたときの効果をプレビューします。

コンテンツのドロップ先を特定するには、ハイライト、挿入ポイントの表示、アニメーションなどが有効です。

コンテンツがドラッグされると、ビューが微妙に点滅して色が変わったり、ドラッグされた画像のために段落が離れたりします。

画面上に複数の移動先がある場合は、一度に一つずつ確認します。

ソースコンテナとデスティネーションコンテナが同じであれば、コンテンツがソースから完全にドラッグされて再びソースに入る場合を除き、ハイライトは不要な場合があります。

コンテンツがドロップされたり、デスティネーションの上に配置されなくなると、ハイライトが削除されることを確認してください。

適切な場合、デスティネーションのコンテンツを自動的にスクロールする。

コンテンツが移動先の範囲外にドラッグされた場合、移動先のコンテンツをスクロールするか、ユーザーがまったく別の移動先にドラッグを続けることを許可するかをアプリが判断する必要があります。

ユーザーがドラッグを続ける場合は、ドラッグされたアイテムがその上に配置されたときに自動的にスクロールする領域を定義することを検討してください。

例えば、Mailの長い下書きメッセージは、コンテンツが本文領域の上部または下部にドラッグされると、自動的にスクロールします。

標準のテキストビューやテキストフィールドでは、この動作が自動的に行われます。

ドロップされたコンテンツの可能な限りリッチな表現を抽出して表示します。

例えば、アプリにいくつかのチャートの表現が提供される場合があります。

アプリがチャートをサポートしている場合は、ネイティブのチャートオブジェクトを抽出して表示できます。

zアプリがチャートをサポートしていない場合は、代わりにチャートの画像バージョンを抽出して表示することができます。

適用可能な場合は、ドロップしたコンテンツの関連部分のみを抽出します。

たとえば、ユーザーが連絡先をContactsからMailメッセージの受信者フィールドにドラッグした場合、名前とメールアドレスのみが使用され、連絡先の住所情報は使用されません。

コンテンツが削除された後、テーブルビューやコレクションビューにプレースホルダーを表示する。

プレースホルダーは、コンテンツの転送が完了した後にコンテンツが置かれる場所を一時的に示します。

ドロップされたコンテンツの転送に時間がかかる場合、進捗状況を表示する。

デフォルトでは、アプリ間で時間のかかる転送が発生した場合、システムはアプリモーダルアラートを表示します。

例えば、テーブルビューやコレクションビュー内のプレースホルダーに進捗状況を表示するなど、進捗状況の表示方法をカスタマイズすることで、ユーザーがアプリの使用を妨げられないようにすることができます。

なお、ユーザーがコンテンツをドロップしないと、転送プロセスは開始されません。

コンテンツのドロップによりプロセスが開始されたときにフィードバックを提供する。

ユーザーがコンテンツをコントロールにドロップすることでタスクが開始された場合、タスクが開始されたことを示し、その進捗状況をユーザーに知らせます。

ドロップが失敗したらユーザーに知らせる。

ファイル転送が中断されたなどの理由でドロップしたコンテンツを挿入できなかった場合は、ドロップが失敗したことをユーザーに知らせる。

ドロップしたテキストに適切なスタイルを適用する。

ソースとデスティネーションが同じスタイルのテキスト属性をサポートしている場合、ドロップされたテキストは元のフォント、書体、サイズ、およびその他の属性を維持する必要があります。

そうでない場合は、ドロップしたテキストは宛先のスタイルを採用する必要があります。

ユーザーがドラッグ＆ドロップをすぐに取り消すことができない場合には、さりげなく、直感的に操作を中止する方法を提供することを検討してください。

例えば、共有アプリでは、ドロップしたコンテンツを投稿する前に、中間的な共有シートを表示します。

この共有シートでは、ステータスメッセージなどの追加コンテンツを提供するとともに、キャンセルボタンを提供することができます。

Photosでは、共有フォトストリームに写真がドラッグされたときにこのような動作をします。